<template>
  <div id="basicLayout">
    <Layout style="min-height: 100vh">
      <!--<Sider hide-trigger>Sider</Sider>-->
      <Layout>
        <Header class="layout-header">
          <GlobalHeader />
        </Header>
        <Content id="content">
          <transition name="fade" mode="out-in">
            <router-view />
          </transition>
        </Content>
        <GlobalFooter />
      </Layout>
    </Layout>
  </div>
</template>

<script>
import GlobalHeader from '@/components/GlobalHeader'
import GlobalFooter from '@/components/GlobalFooter'

export default {
  components: { GlobalHeader, GlobalFooter },
  data() {
    return {}
  },
  created() {},
  methods: {},
}
</script>

<style scoped>
#basicLayout {
  background: #f5f7f9;
}

.layout-header {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: fixed;
  width: 100%;
  z-index: 1000;
  padding: 0;
}

#content {
  padding: 24px;
  margin-top: 64px;
  min-height: calc(100vh - 64px - 70px);
  background: #fff;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
</style>
